<script lang="ts" setup name="B11Watch3">
import { reactive, watch } from "vue";

const person = reactive({ name: "张三", age: 18 });

const changeName = () => {
  person.name += "~";
};

const changeAge = () => {
  person.age += 1;
};

const changePerson = () => {
  Object.assign(person, { name: "李四", age: 38 });
};

watch(
  person,
  (newVal, oldVal) => {
    console.log("＊【深度监视整个person】监测到变化：", newVal, oldVal);
  },
  // {
  //  deep: !true, // 开启深度监视
  //immediate: true, // （无论数据是否发生变化）立即执行监视回调
  //},
);
</script>
<template>
  <h1 class="text-xl border-l-8 pl-3">
    情况三：监视reactive定义的对象类型数据(默认自动开启了深度监视)
  </h1>
  <div class="my-3">
    <div>姓名：{{ person.name }}</div>
    <div>年龄：{{ person.age }}</div>
  </div>
  <div class="flex justify-start items-center gap-x-2">
    <button class="p-1 border shadow" @click="changeName">改名</button>
    <button class="p-1 border shadow" @click="changeAge">改年龄</button>
    <button class="p-1 border shadow" @click="changePerson">改人</button>
  </div>
</template>
